<template>
    <div class="invite">
        <nav-list :clickIndex="2"></nav-list>

        <div class="middle-invite" style="width: 97%; margin: 20px auto">
            <div class="date-picker" style="padding-bottom: 30px">
                <el-select
                    v-model="provinceSelet"
                    filterable
                    placeholder="请选择"
                    @change="changePicker"
                >
                    <el-option
                        v-for="item in provinceList"
                        :key="item.province"
                        :label="item.province"
                        :value="item.province"
                    >
                    </el-option>
                </el-select>
            </div>
            <avue-crud
                :page.sync="page"
                :data="tableData"
                :option="tableOption"
                :table-loading="tableLoading"
                :header-cell-class-name="headerCell"
                :row-class-name="rowCell"
                @on-load="getPage"
                @sort-change="sortChange"
                ref="crud"
            >
                <template slot-scope="scope" slot="menu">
                    <el-button
                        type="primary"
                        size="small"
                        @click="rowView(scope.row, scope.index)"
                        >查看</el-button
                    >
                </template>
            </avue-crud>
        </div>
        <el-dialog width="80%" :visible.sync="dialogTableVisible">
            <avue-crud
                :page.sync="page2"
                :data="tableData2"
                :option="tableOption2"
                :table-loading="tableLoading2"
                :header-cell-class-name="headerCell"
                :row-class-name="rowCell"
                @on-load="getPage2"
                ref="crud"
            >
            </avue-crud>
        </el-dialog>
    </div>
</template>

<script>
import { tableOption, tableOption2 } from "@/const/inviteIndex/inviteIndex";
import { getInviteNum, getInviteDetail } from "@/api/inviteIndex/inviteIndex";
import {
    dealer_summary,
    store_summary,
    province_summary,
} from "@/api/homeIndex/homeIndex";
import navList from "@/components/navList/navList.vue";

export default {
    name: "inviteIndex",
    components: {
        navList,
    },
    data() {
        return {
            // 日期时间范围不在同一天
            pickerOptions2: {
                onPick: ({ maxDate, minDate }) => {
                    if (minDate && !maxDate) {
                        this.timeOptionRange = minDate;
                    }
                    if (maxDate) {
                        this.timeOptionRange = null;
                    }
                },
                disabledDate: (time) => {
                    let timeOptionRange = this.timeOptionRange;
                    if (
                        timeOptionRange &&
                        time.getTime() === timeOptionRange.getTime()
                    )
                        return true;
                },
            },
            navList: [
                {
                    name: "首页",
                    type: 1,
                    img: "../../../public/static/images/nav_1.png",
                },
                {
                    name: "活跃分析",
                    type: 4,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "行为分析",
                    type: 5,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "小竹叶分析",
                    type: 3,
                    img: "../../../public/static/images/nav_3.png",
                },
                {
                    name: "邀请排行榜",
                    type: 2,
                    img: "../../../public/static/images/nav_3.png",
                },

                // {
                //   name: '首页2',
                //   type: 3,
                //   img: '../../../public/static/images/nav_3.png'
                // }
            ],
            clickIndex: 2,
            tableData: [],
            tableOption: tableOption,
            page: {
                currentPage: 1,
                pageSize: 10,
                total: 100,
            },
            tableLoading: true,
            pickerTime: "",
            dialogTableVisible: false,
            page2: {
                currentPage: 1,
                pageSize: 10,
                total: 100,
            },
            tableData2: [],
            tableOption2: tableOption2,
            tableLoading2: true,
            pid: "",
            provinceList: [],
            provinceSelet: "全国",

            sortProp: "",
        };
    },
    created() {
        let startDate = this.$moment().add(-7, "days").format("YYYY-MM-DD");
        let endDate = this.$moment().add(1, "days").format("YYYY-MM-DD");
        this.pickerTime = [startDate, endDate];
    },
    mounted() {
        this.province_summary();
    },
    methods: {
        // 获取省的列表
        province_summary() {
            province_summary({
                page: 1,
                pagesize: 100,
            }).then((res) => {
                this.provinceList = [
                    {
                        province: "全国",
                    },
                    ...res.data.data,
                ];
                console.log(this.provinceList);
            });
        },
        //获取邀请页面数据
        getPage(page, params, prop = "", order = null) {
            this.tableLoading = true;
            let obj = {
                page: page.currentPage,
                pagesize: page.pageSize,
            };
            if (this.provinceSelet != "全国") obj.province = this.provinceSelet;
            if (order != null) {
                obj.sort = prop;
                if (order == "ascending") obj.by = "asc";
                if (order == "descending") obj.by = "desc";
            }

            dealer_summary(obj).then((res) => {
                this.tableData = res.data.data;
                this.page.total = parseInt(res.data.data[0].count);
                this.tableLoading = false;
            });
        },

        changePicker(e) {
            console.log(this.provinceSelet);
            this.page.currentPage = 1;
            this.getPage(this.page, {});
        },

        //表头样式
        headerCell({ row, column, rowIndex, columnIndex }) {
            return "header-cell";
        },

        rowCell({ row, column, rowIndex, columnIndex }) {
            if (rowIndex % 2 == 0) {
                return "row-cell";
            } else {
                return "row-cells";
            }
        },

        navClick(item) {
            this.clickIndex = item.type;
            if (item.type == 1) {
                this.$router.push("/homeIndex");
            } else if (item.type == 2) {
                this.$router.push("/inviteIndex");
            } else if (item.type == 3) {
                this.$router.push("/bambooIndex");
            } else if (item.type == 4) {
                this.$router.push("/activeAnalysis");
            } else if (item.type == 5) {
                this.$router.push("/behaviorAnalysis");
            }
        },
        rowView(row, index) {
            this.dialogTableVisible = true;
            this.pid = row.dealer_name;
            this.getPage2(this.page2, {});
        },
        getPage2(page, params) {
            let obj = {
                page: page.currentPage,
                pagesize: page.pageSize,
                dealer_name: this.pid,
            };
            store_summary(obj).then((res) => {
                this.tableData2 = res.data.data;
                this.page2.total = res.data.data[0].count;
                this.tableLoading2 = false;
            });
        },

        sortChange({ column, prop, order }) {
            this.page.currentPage = 1;
            this.getPage(this.page, {}, prop, order);
        },
    },
};
</script>

<style lang="scss">
@import "@/styles/home.scss";
@import "@/styles/common.scss";

.header-cell {
    color: #61d2f7 !important;
    font-size: 14px;
    font-weight: 600;
    height: 48px;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}

.row-cell {
    color: #fff !important;
    background-color: #072951 !important;
}
.row-cells {
    color: #fff !important;
    background-color: #072951 !important;
    box-shadow: -10px 0px 15px #034c6a inset, 10px 0px 15px #034c6a inset;
}
.el-card {
    background-color: #072951 !important;
}
.el-pagination__total {
    color: #fff !important;
}
.el-pagination__jump {
    color: #fff !important;
}
.hover-row {
    background-color: #072951 !important;
}

.el-table__body .el-table__row.hover-row td {
    background-color: #072951 !important;
}

.el-table tbody tr:hover td {
    background-color: #072951 !important;
}
.el-dialog__header {
    background-color: #081832 !important;
    color: #fff !important;
}
.el-dialog__body {
    background-color: #081832 !important;
}
.el-range-editor--small.el-input__inner {
    background-color: #072951 !important;
}
.el-range-separator {
    color: #fff !important;
}
</style>